<script setup lang="ts">
import { useColumns } from "./columns";
import { Plus } from "@element-plus/icons-vue";
import { ref, onMounted, watch } from "vue";
import { ElMessage } from "element-plus";
import ExhibitionInfoForm from "./ExhibitionInfoForm.vue";
import {
  getExhibitionList,
  getExhibitionDetail,
  updateExhibition,
  ExhibitionListResult
} from "@/api/exhibitionInfo";
import { getExhibitorId } from "@/utils/getExhibitorId";

defineOptions({
  // name 作为一种规范最好必须写上并且和路由的name保持一致
  name: "exhibitionInfo"
});
// 表格数据
const exhibitionList = ref([]);
const loading = ref(false);

// 分页信息
const pagination = ref({
  total: 0,
  page: 1,
  limit: 10
});

onMounted(() => {
  getExhibitionListData();
});

// 获取会刊列表
const getExhibitionListData = async (page = 1, limit = 10) => {
  try {
    loading.value = true;
    const exhibitor_id = getExhibitorId();
    const res: ExhibitionListResult = await getExhibitionList(
      page,
      limit,
      exhibitor_id
    );
    console.log("API返回的完整数据:", res);
    console.log("列表数据:", res.data.list);
    // 将API数据赋值给表格
    exhibitionList.value = res.data.list || [];
    // 更新分页信息
    pagination.value = {
      total: res.data.total,
      page: res.data.page,
      limit: res.data.limit
    };
    console.log("赋值后的表格数据:", exhibitionList.value);
  } catch (error) {
    console.error("获取会刊列表失败:", error);
    exhibitionList.value = [];
  } finally {
    loading.value = false;
  }
};

// 分页改变
const handleCurrentChange = (page: number) => {
  pagination.value.page = page;
  getExhibitionListData(page, 10);
};

const handleRefresh = () => {
  // 调用列表查询接口
  console.log("刷新");
  getExhibitionListData(pagination.value.page, 10);
};

const handleAdd = () => {
  // 处理新增逻辑，使用 @components已封装好的组件
  console.log("新增数据");
  formMode.value = "add";
  currentFormData.value = null; // 新增时清空数据
  isShowEditDialog.value = true;
};

const handleView = async (row: any) => {
  // 处理查看逻辑
  try {
    const exhibitor_id = getExhibitorId();
    const response: any = await getExhibitionDetail(row.id, exhibitor_id);
    if (response.code === 1) {
      formMode.value = "view";
      currentFormData.value = response.data;
      isShowEditDialog.value = true;
    } else {
      ElMessage.error(response.msg || "获取会刊详情失败");
    }
  } catch (error) {
    console.error("获取会刊详情失败:", error);
    ElMessage.error("获取会刊详情失败，请重试");
  }
};

const handleEdit = async (row: any) => {
  // 处理修改逻辑
  try {
    const exhibitor_id = getExhibitorId();
    const response: any = await getExhibitionDetail(row.id, exhibitor_id);
    if (response.code === 1) {
      formMode.value = "edit";
      currentFormData.value = response.data;
      isShowEditDialog.value = true;
    } else {
      ElMessage.error(response.msg || "获取会刊详情失败");
    }
  } catch (error) {
    console.error("获取会刊详情失败:", error);
    ElMessage.error("获取会刊详情失败，请重试");
  }
};

const { tableData, columns } = useColumns(
  exhibitionList,
  handleView,
  handleEdit,
  handleRefresh
);

const handleCancel = () => {
  isShowEditDialog.value = false;
  // 清空表单数据
  currentFormData.value = null;
  formMode.value = "add";
};

const handleConfirm = async (formData: any) => {
  try {
    if (formMode.value === "edit") {
      // 修改会刊信息
      const result: any = await updateExhibition(formData);
      if (result.code === 1) {
        ElMessage.success("修改会刊信息成功！");
        isShowEditDialog.value = false;
        // 清空表单数据
        currentFormData.value = null;
        formMode.value = "add";
        // 刷新列表
        await getExhibitionListData(pagination.value.page, 10);
      } else {
        ElMessage.error(result.msg || "修改会刊信息失败！");
      }
    } else {
      // 新增模式，直接关闭
      isShowEditDialog.value = false;
      // 清空表单数据
      currentFormData.value = null;
      formMode.value = "add";
      // 刷新列表
      await getExhibitionListData(pagination.value.page, 10);
    }
  } catch (error) {
    console.error("操作失败:", error);
    ElMessage.error("操作失败，请重试！");
  }
};

const isShowEditDialog = ref(false);
const formMode = ref<"add" | "view" | "edit">("add"); // 表单模式：新增、查看、修改
const currentFormData = ref(null); // 当前表单数据

// 监听弹框关闭，清空数据
watch(isShowEditDialog, newVal => {
  if (!newVal) {
    // 弹框关闭时清空数据
    currentFormData.value = null;
    formMode.value = "add";
  }
});
</script>

<template>
  <div>
    <!-- 统一的白色背景容器 -->
    <div class="table-container">
      <!-- 自定义头部 -->
      <div class="custom-header">
        <div class="header-left">
          <h2 class="header-title">会刊提交</h2>
        </div>
        <div class="header-right">
          <el-button type="primary" @click="handleAdd">
            <el-icon><Plus /></el-icon>
            提交会刊
          </el-button>
        </div>
      </div>

      <!-- 表格 -->
      <pure-table
        :data="tableData"
        :columns="columns"
        :loading="loading"
        :scroll="{ x: 1200 }"
        style="width: 100%"
      />

      <!-- 分页组件 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="pagination.page"
          :page-size="10"
          :total="pagination.total"
          layout="total, prev, pager, next, jumper"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 弹框放在最外层，避免被其他组件影响 -->

    <el-dialog v-model="isShowEditDialog" :top="'25px'">
      <ExhibitionInfoForm
        :mode="formMode"
        :initial-data="currentFormData"
        @cancel="handleCancel"
        @confirm="handleConfirm"
      />
    </el-dialog>
  </div>
</template>

<style scoped>
/* 统一的白色背景容器 */
.table-container {
  background-color: #fff;
  padding: 0 20px;
}

/* 自定义头部样式 */
.custom-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}

.header-left .header-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #303133;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 分页容器样式 */
.pagination-container {
  padding: 20px 0;
  text-align: center;
  display: flex;
  justify-content: center;
  width: 100%;
}

/* 表格滚动条样式 */
:deep(.el-table) {
  overflow-x: auto;
}

:deep(.el-table__body-wrapper) {
  overflow-x: auto;
}

:deep(.el-table td) {
  padding: 12px 0;
}

/* 固定列样式 */
:deep(.el-table__fixed-right) {
  right: 0 !important;
  border-left: 1px solid #ebeef5;
  box-shadow: -2px 0 8px rgb(0 0 0 / 10%);
}

:deep(.el-table__fixed) {
  box-shadow: 2px 0 8px rgb(0 0 0 / 10%);
}

/* 解决右侧空白问题 */
:deep(.el-table__fixed-right-patch) {
  width: 0 !important;
  background-color: #fff;
}

:deep(.el-scrollbar__view) {
  width: 100%;
}

:deep(.el-table__body) {
  width: 100% !important;
}

/* 确保表格容器正确处理 */
:deep(.pure-table) {
  width: 100%;
  overflow-x: auto;
}
</style>
